<!--
  Copyright © 2016 Cask Data, Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<div class="content-loading text-center" ng-if="MetadataController.loading">
  <h3>
    <span class="fa fa-spinner fa-spin"></span>
    <span>Loading metadata</span>
  </h3>
</div>

<div ng-if="!MetadataController.loading">
  <!-- TAGS SIDEBAR -->
  <div class="entity-detail-tags-column">
    <div class="entity-container">
      <div class="user-tags">
        <h4>Business tags</h4>
        <div class="tags-container">

          <div ng-if="MetadataController.userTags.length > 0"
              ng-repeat="tag in MetadataController.userTags"
              class="tag user">
            <span uib-tooltip="{{ tag }}"
                  tooltip-append-to-body="true"
                  tooltip-popup-delay="300"
                  tooltip-ellipsis="{{ tag }}"
                  tooltip-enable="ellipsis"
                  data-ellipsis="ellipsis"
                  data-offset-value="15"
                  tooltip-class="tracker-tooltip"
                  ng-click="MetadataController.goToTag($event, tag)">
              {{ tag }}
            </span>
            <span ng-click="MetadataController.deleteTag(tag)"
                  class="fa fa-times pull-right"></span>
          </div>

          <div class="add-tag" ng-if="!MetadataController.inputOpen">
            <a class="btn add" ng-click="MetadataController.openTagInput($event)">
              <span class="fa fa-plus"></span>
            </a>
          </div>
          <div class="tag-input"
              ng-if="MetadataController.inputOpen"
              ng-class="{'invalid': MetadataController.invalidFormat || MetadataController.duplicateTag}">
            <div my-escape-close="MetadataController.escapeInput()">
              <input
                type="text"
                class="form-control"
                ng-model="MetadataController.tagInputModel"
                placeholder="Enter a tag"
                max-length="50"
                cask-focus="tagInput"
                ng-keypress="$event.keyCode === 13 && MetadataController.addTag()"
                ng-click="$event.stopPropagation()" />
            </div>
          </div>
          <p ng-if="MetadataController.invalidFormat"
            class="text-danger">
            <span class="fa fa-exclamation-triangle"></span> No special characters allowed.
          </p>
          <p ng-if="MetadataController.duplicateTag"
            class="text-danger">
            <span class="fa fa-exclamation-triangle"></span> Tag already exist.
          </p>
        </div>

      </div>

      <div class="system-tags" ng-if="MetadataController.systemTags.system.length > 0">
        <h4>System tags</h4>

        <div class="tags-container">
          <div ng-repeat="tag in MetadataController.systemTags.system"
              class="tag">
            <span uib-tooltip="{{ tag }}"
                  tooltip-append-to-body="true"
                  tooltip-popup-delay="300"
                  tooltip-ellipsis="{{ tag }}"
                  tooltip-enable="ellipsis"
                  data-ellipsis="ellipsis"
                  data-offset-value="15"
                  tooltip-class="tracker-tooltip"
                  ng-click="MetadataController.goToTag($event, tag)">
            {{ tag }}
          </span>
          </div>
        </div>
      </div>

      <div class="no-properties-message text-center"
           ng-if="MetadataController.systemTags.system.length === 0 && MetadataController.userTags.length === 0">
        <h4>There are no tags</h4>
      </div>

    </div>
  </div>

  <!-- SCHEMA -->
  <div class="entity-detail-schema-column">
    <div class="title-bar">
      <h4>Schema</h4>
    </div>

    <div class="column-content">
      <my-complex-schema
        ng-model="MetadataController.schema"
        is-disabled="true"
        ng-if="MetadataController.schema">
      </my-complex-schema>

      <div class="no-properties-message text-center"
           ng-if="!MetadataController.schema">
        <h4>There is no schema</h4>
      </div>
    </div>
  </div>

  <!-- PROPERTIES -->
  <div class="entity-detail-properties-column">
    <div class="title-bar">
      <div class="title-tab text-center"
           ng-class="{ 'active': MetadataController.activePropertyTab === 0}"
           ng-click="MetadataController.activePropertyTab = 0">
        <h4>Business</h4>
      </div>

      <div class="title-tab text-center"
           ng-class="{ 'active': MetadataController.activePropertyTab === 1}"
           ng-click="MetadataController.activePropertyTab = 1">
        <h4>System</h4>
      </div>
    </div>

    <div class="column-content">
      <!-- USER PROPERTIES -->
      <div class="table-container"
           ng-if="MetadataController.activePropertyTab === 0">
        <table class="table table-bordered">
          <tbody>
            <tr ng-repeat="(key, value) in MetadataController.externalDatasetProperties">
              <td>{{ key }}</td>
              <td>{{ value }}</td>
              <td></td>
            </tr>

            <tr ng-repeat="(key, value) in MetadataController.properties.user">
              <td>{{ key }}</td>
              <td>{{ value }}</td>
              <td class="action text-center">
                <button class="btn btn-default"
                        ng-click="MetadataController.deleteProperty(key)">
                  <i class="fa fa-trash text-danger"></i>
                </button>
              </td>
            </tr>

            <tr class="input-row"
                ng-keydown="MetadataController.propertyKeypress($event)">
              <td>
                <input type="text" class="form-control" id="property-key-input"
                       ng-model="MetadataController.propertyInput.key"
                       placeholder="Name">
              </td>
              <td>
                <input type="text" class="form-control"
                       ng-model="MetadataController.propertyInput.value"
                       placeholder="Value">
              </td>
              <td class="action text-center">
                <button class="btn btn-default plus"
                        ng-click="MetadataController.addProperty()">
                  <i class="fa fa-plus"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>

      </div>

      <!-- SYSTEM PROPERTIES -->
      <div ng-if="MetadataController.activePropertyTab === 1">
        <table class="table table-bordered"
               ng-if="!MetadataController.properties.isSystemEmpty">
          <thead>
            <tr>
              <th>Key</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="(key, value) in MetadataController.properties.system" ng-if="key !== 'schema'">
              <td class="text-capitalize">{{ key }}</td>
              <td>{{ value }}</td>
            </tr>
          </tbody>
        </table>

        <div class="no-properties-message text-center"
             ng-if="MetadataController.properties.isSystemEmpty">
          <h4>There are no system properties</h4>
        </div>
      </div>

    </div>
  </div>
</div>
